<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  
		xmlns:h="http://java.sun.com/jsf/html"  
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:c="http://java.sun.com/jsp/jstl/core"
        xmlns:a4j="http://richfaces.org/a4j"
        xmlns:rich="http://richfaces.org/rich">  
    
    <ui:composition template="#{helperNavigation.getPathTemplate('basic')}">
        <ui:define name="pageTitle">Bibliothèque</ui:define>
        <ui:define name="mainTitle">Bibliothèque</ui:define>
        <ui:define name="mainContent">
            <!-- TODO: Erreur lorsqu'une catégorie ne contient aucun élément, ça fait planter le système... -->
            <div id="myLibrary" class="center">
                <h:form>
                    <rich:tabPanel switchType="server" headerLocation="center">
                        <c:forEach var="cat" items="#{bookManager.categories}">
                            <rich:tab header="#{cat}" action="#{bookManager.loadBooksByCategory(cat)}" onclick="#{bookManager.loadBooksByCategory(cat)}" style="height: 0px;"></rich:tab>
                        </c:forEach>
                    </rich:tabPanel>
                </h:form>
                <!-- Si on met l'include dans le tabPanel les boutons plantent. -->
                <ui:include src="/subContents/library.xhtml"></ui:include>
            </div>
            
            <script type="text/javascript">
                $j('#myLibrary').css('width', '#{(userSession.books.size() ge 5)? 100 : userSession.books.size()*30}%');
            </script>
        </ui:define>
    </ui:composition>
</html>



